<template>
  <div class="content-main" v-if="state.modelFlag">
    <div class="header">
      <div class="header-left">
        <div class="toggle-box">
          <span :class="['item', state.switchFlag === 1 ? 'active' : '']" @click="handleSwitch(1)">
            表
          </span>
          <span :class="['item', state.switchFlag === 2 ? 'active' : '']" @click="handleSwitch(2)">
            图
          </span>
        </div>
      </div>

      <div class="header-main">
        <!-- 下拉框 -->
        <div class="header-select">
          <!-- <el-cascader
            v-model="modelType"
            :options="modelTypeData"
            placeholder="模型类型"
            clearable
            :props="{ value: 'typeId', label: 'typeName', children: 'types' }"
          >
            <template #prefix>
              <span style="padding-left: 5px" class="select-bg"></span>
            </template>
          </el-cascader> -->
        </div>
        <!-- 输入框 -->
        <div class="header-input">
          <el-input v-model="form.name" placeholder="输入模型名称" />
        </div>
        <!-- 检索模型，按钮 -->
        <span class="header-search" @click="handleSearchModel"></span>
        <span class="header-btn" @click="registerBtn">注册</span>

        <div class="header-btn-group">
          <span class="header-config group-wth" @click="clickOpenGroup">计算组</span>
          <div class="header-config" @click="clickBase">
            <span class="header-config-img"></span>
            <span class="header-config-text">基础配置</span>
          </div>
        </div>
      </div>
    </div>
    <div class="boby-content" v-if="state.switchFlag === 1">
      <div class="boby-left">
        <ModelTree @nodeClick="handleNodeClick" />
      </div>
      <div class="body-right">
        <div class="body-item" v-for="(item, index) in state.model_list" :key="index">
          <div class="item-top">
            <div class="left-box">
              <img src="@/assets/images/bg-2.png" />
              <div class="img-title">{{ item.unit }}</div>
            </div>
            <div class="right-box">
              <el-tooltip :content="`${item.typeNameSed}-${item.typeName}`" placement="top">
                <div class="model-type">{{ item.typeNameSed }}-{{ item.typeName }}</div>
              </el-tooltip>

              <div class="model-name">{{ item.modelName }}</div>
              <div class="model-version">{{ item.version }}</div>
            </div>
          </div>
          <!-- 底部按钮 -->
          <div class="item-buttom">
            <span class="item-b-button btn-bg-search" @click="clickView(item, index)">查看</span>
            <span class="item-b-button btn-bg-configure" @click="cilckConfig(item, index)"
              >配置</span
            >
            <span class="item-b-button btn-bg-verify2" @click="handleModelCheck(item)">验证</span>

            <div class="other-box" @mouseover="toggleShow(index)" @mouseleave="closeShow">
              <div class="item-b-button btn-bg-other">. . .</div>
              <div class="hover-box">
                <div class="hover-box-item" v-show="flag === index">
                  <span class="size-font" @click="clickShowBack(item)">评价反馈</span>
                  <span class="size-font" @click="editBtn(item.id)">模型修改</span>
                  <span class="size-font" @click="delBtn(item.id)">模型删除</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="boby-content" v-if="state.switchFlag === 2">
      <ModelMap ref="modelMapRef" />
    </div>
  </div>
  <component :modelobj="modelinfo" v-if="!state.modelFlag" :is="state.tabComp"></component>
  <!-- 弹窗 -->
  <ModelEdit :dialogVisible="showDialog" @closeDialog="closeDig" :modelId="modelId" />
  <!-- 模型验证弹框 -->
  <ModelCheckDialog :dialogVisible="showDialogCheck" ref="modelCheckDialogRef" />
  <!-- 查看 -->
  <ModelView :dialogVisible="showView" @closeDialog="closeDig" />
  <!-- 评价反馈 -->
  <FeedBack :dialogVisible="showBack" @closeDialog="closeDig" :modelItem="state.modelItem" />
</template>
<script setup>
import ModelEdit from './cpns/ModelEdit/index.vue'
import ModelMap from './cpns/ModelMap/index.vue'
import ModelTree from './cpns/ModelTree/index.vue'
import ModelCheckDialog from './cpns/modelCheckDialog/index.vue'
import ModelView from './cpns/ModelView/index.vue'
import ModelConfig from './cpns/ModelConfig/index.vue'
import ModelCheck from './cpns/ModelCheck/index.vue'
import BaseConfig from './cpns/BaseConfig/index.vue'
import GroupConfig from './cpns/GroupConfig/index.vue'
import FeedBack from './cpns/FeedBack/index.vue'
import model_types from '@/assets/data/com_data/model_types.json'
import home from '@/assets/data/home.json'
import {
  getModelList,
  getModelListNew,
  getModelType,
  delModel,
  getModelDetails,
  login
} from '@/services/modules/home'
import { localCache } from '@/utils/cache'
// import moreyChart from '@/components/app-echart/morey-chart'
import emitter from '@/utils/bus'
import { reactive, ref, markRaw, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 检索参数

let form = reactive({
  region: '',
  name: ''
})
const modelCheckDialogRef = ref(null)
// 模型类型data
const modelTypeData = ref([])
const modelMapRef = ref(null)
// 选择的模型类型
const modelType = ref('')
let flag = ref({})
let modelinfo = ref({})
let showDialog = ref(false)
let showDialogCheck = ref(false)
let showView = ref(false)
let showBack = ref(false)
const modelId = ref(0)
const state = reactive({
  switchFlag: 1,
  tabComp: '',
  modelFlag: true,
  // 模型列表
  model_list: [],
  modelItem: {}
})
onMounted(() => {
  // setToken()
  initData()
  getModel()
})
//
const handleSwitch = (item) => {
  if (item == 1) {
    state.switchFlag = 1
  } else if (item == 2) {
    state.switchFlag = 2
  }
}
// 模型验证弹框
const handleModelCheck = (item) => {
  // showDialogCheck.value = true
  modelCheckDialogRef.value.handleOpenModal(item)
}
const toggleShow = (index) => {
  flag.value = index
}
const closeShow = () => {
  flag.value = {}
}
const registerBtn = () => {
  modelId.value = 0
  showDialog.value = true
}
const editBtn = (id) => {
  modelId.value = id
  showDialog.value = true
}
const delBtn = (id) => {
  ElMessageBox.confirm('此操作将永久删除该模型, 是否继续?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // delModel
      delModel({
        id: Number(id)
      }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getModel()
        }
      })
    })
    .catch(() => {})
}
const handleNodeClick = (data) => {
  console.log(data, 'data')
  modelType.value = data.typeCode
  getModel()
}
//检索模型
function handleSearchModel() {
  if (state.switchFlag == 1) {
    getModel()
  } else {
    modelMapRef.value.handleSearchModelName(form.name)
  }
}
// 查看
const clickView = (item, index) => {
  // 时空变源
  showView.value = true
  getModelDetails({
    modelId: item.id
  }).then((res) => {
    if (res.code === 200) {
      emitter.emit('goView', res.data)
    }
  })
}

// 评价反馈
const clickShowBack = (item) => {
  console.log(item, '评价')
  state.modelItem = item
  showBack.value = true
}
emitter.on('goback', (value) => {
  state.modelFlag = value
})
// 弹窗 v控制弹窗显隐
const closeDig = (v) => {
  showDialog.value = v
  showView.value = v
  showBack.value = v
  //刷新模型列表
  getModel()
}
// 配置
const cilckConfig = (item, index) => {
  modelinfo.value = item
  state.modelFlag = false
  state.tabComp = markRaw(ModelConfig)
}
// 验证
const clickCheck = (item, index) => {
  modelinfo.value = item
  state.modelFlag = false
  state.tabComp = markRaw(ModelCheck)
}
// 打开基础配置页面
const clickBase = () => {
  state.modelFlag = false
  state.tabComp = markRaw(BaseConfig)
}
// 打开计算组
const clickOpenGroup = () => {
  state.modelFlag = false
  state.tabComp = markRaw(GroupConfig)
}
function initData() {
  return new Promise((resolve, reject) => {
    getModelType().then((res) => {
      if (res.code === 200) {
        modelTypeData.value = JSON.parse(
          JSON.stringify(res.data).replace(/"specialName"/g, '"typeName"')
        )
      }
    })
  })
}
function getModel() {
  getModelListNew({
    typeCode: modelType.value,
    modelName: form.name,
    pageSize: 10000,
    pageNum: 1
  }).then((res) => {
    if (res.code === 200) {
      state.model_list = res.data.list
    } else {
      setToken()
    }
  })
}
function setToken() {
  return new Promise((resolve, reject) => {
    login({
      userName: 'm_dawenhe',
      password: 'Da&wen#he%1'
    }).then((res) => {
      if (res.code === 200) {
        localCache.setCache('login/token', res.data.token)
      }
    })
  })
}
</script>
<style lang="less" scoped>
.content-main {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  overflow: hidden;
  .header {
    width: 100%;
    padding: 10px 0;
    display: flex;
    border-bottom: 1px solid #ededed;
    // justify-content: flex-end;
    .header-left {
      width: 30%;
      .toggle-box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 35px;
        width: 120px;
        padding: 0 3px;
        margin-left: 30px;
        border-radius: 25px;
        border: 2px solid #409eff;

        .item {
          height: 25px;
          line-height: 25px;
          width: 55px;
          border-radius: 25px;
          font-size: 16px;
          color: #409eff;
          text-align: center;
          font-weight: 500;
          cursor: pointer;

          &.active {
            background-color: #409eff;
            color: #ffffff;
          }
        }
      }
    }

    .header-main {
      display: flex;
      width: 70%;
      justify-content: space-between;
      padding-right: 3%;

      .header-select {
        .select-bg {
          display: inline-block;
          background: url(@/assets/images/u101.png) no-repeat;
          width: 15px;
          height: 20px;
          background-size: 100% 100%;
          line-height: 20px;
        }
      }
      .header-input {
        width: 400px;
        margin-right: -100px;
      }
      .header-search {
        width: 30px;
        height: 30px;
        display: inline-block;
        background: url(@/assets/images/search.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      .header-btn-group {
        display: flex;
        .group-wth {
          width: 70px;
          display: flex;
          justify-content: center;
        }
      }
      .header-btn {
        text-align: center;
        line-height: 30px;
        width: 90px;
        height: 30px;
        background-color: rgba(22, 155, 213, 1);
        border-radius: 5px;
        color: #ffffff;
        cursor: pointer;
      }
      .header-config {
        margin-right: 50px;
        margin-left: 20px;
        width: 120px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        color: rgba(22, 155, 213, 1);
        border: 1px solid rgba(22, 155, 213, 1);
        cursor: pointer;
        display: flex;
        align-items: center;

        .header-config-img {
          height: 30px;
          width: 30px;
          background: url('@/assets/images/u119.png') no-repeat;
          background-size: 100% 100%;
        }
        .header-config-text {
          margin-left: 5px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }
  .boby-content {
    width: 100%;
    height: calc(100% - 30px);

    box-sizing: border-box;
    display: flex;
    .boby-left {
      width: 20%;
      height: 100%;

      border-right: 1px solid #e0e0e0;
      .boby-left-item {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #333333;
        font-size: 16px;
        cursor: pointer;
      }
    }
    .body-right {
      width: 80%;
      height: 100%;
      overflow-y: auto;
      box-sizing: border-box;
      padding: 40px;
      margin-top: 20px;
      overflow-y: auto;
      .body-item {
        float: left;
        height: 150px;
        margin: 0 60px 70px 0; // 间隙为20px
        // border: 1px solid #888;
        box-sizing: border-box;
        width: calc((100% - 180px) / 4); // 我这里一行显示4个 所以是/4  一行显示几个就除以几
        min-width: calc((100% - 180px) / 4);
        max-width: calc((100% - 180px) / 4);
        &:nth-child(4n) {
          margin-right: 0;
        }
        background-image: url(@/assets/images/bg-1.png);
        background-size: 100% 100%;

        border-radius: 10px;
        .item-top {
          height: 75%;
          width: 100%;
          display: flex;
          align-items: center;
          .left-box {
            text-align: center;
            width: 50%;
            img {
              width: 40px;
              height: 38px;
            }
            .img-title {
              margin-top: 10px;
              color: #d7d7d7;
            }
          }
          .right-box {
            .model-type {
              width: 200px;
              font-size: var(--content-fontsize);
              margin-bottom: 10px;
              color: #00ffff;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              cursor: pointer;
            }
            .model-name {
              font-size: var(--header-fontsize);
              margin-bottom: 4px;
              color: #ffffff;
            }
            .model-version {
              font-size: var(--content-fontsize);
              color: #d7d7d7;
            }
          }
        }
        .item-buttom {
          width: 100%;
          height: 25%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .other-box {
            position: relative;
          }
          .item-b-button {
            width: 70px;
            height: 25px;
            border-radius: 8px;
            line-height: 25px;
            text-align: center;
            color: #ffffff;
            cursor: pointer;
            font-size: 13px;

            margin-bottom: 10px;
          }
          // 按钮样式
          .btn-bg-search {
            background-color: rgba(22, 155, 213, 1);
          }

          .btn-bg-configure {
            background-color: rgba(112, 182, 3, 1);
          }

          .btn-bg-verify {
            background-color: rgba(0, 191, 191, 1);
          }
          .btn-bg-verify1 {
            background-color: rgb(161, 167, 167);
          }
          .btn-bg-verify2 {
            background-color: rgba(0, 191, 191, 1);
          }

          .btn-bg-other {
            background-color: rgb(102, 143, 219);
          }
        }
        .hover-box {
          margin-top: -3px;
          position: absolute;
          z-index: 200;
          .hover-box-item {
            width: 90px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            .size-font {
              cursor: pointer;
              height: 30px;
              width: 100%;
              background-color: #636a6e;
              text-align: center;
              line-height: 30px;
              border-bottom: solid 1px #d7d7d7;
              color: #ffffff;
              font-size: 14px;

              &:nth-child(3n) {
                border-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
